<template>
  <div>
    <top-header :isLeft="true" title="热销排行榜"></top-header>
    <img
      class="header-img"
      src="http://bpic.588ku.com/element_origin_min_pic/19/12/24/2b7ea93390b22ab9158801d3a21db14e.jpg"
      alt=""
    />
    <div class="fox" v-for="(item, index) in hotproduct" :key="index" >
      <div class="content">
        <div class="content-img">
          <img :src="item.img" alt="" />
        </div>
        <div class="container">
          <p class="title">
            <b>{{ item.name }}</b>
          </p>
          <p class="text">{{ item.content }}</p>
          <label>{{ item.transport }}</label>
          <div class="pay">
            <span class="price">￥{{ item.price/100 }}</span>
            <a-icon class="add" type="plus-circle" style="float: right" />
          </div>
        </div>
      </div>
     <hr>
    </div>
  </div>
</template>

<script>
import TopHeader from "../components/TopHeader.vue";
export default {
  
  components: { TopHeader },
  computed: {
    hotproduct() {
      return this.$store.getters.hotproduct;
    },
  },
};
</script>
<style lang="scss">

.header-img {
  width: 100%;
  height:200px;
}
.content-img img {
  width: 120px;
  height: 120px;
}
.container {
  width: 70%;
  position: relative;
}
.pay {
  width: 90%;
  position: absolute;
  bottom: 0;
}
.content {
  display: flex;
  background-color: white;
}
.title {
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-block: 2px;
}
.text {
  color: gray;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.container label {
  font-size: 3px;
  width: 100px;
  border: 1px solid #ff9933;
  color: #ff9933;
}
.price {
  color: #FF6347;
}
.add {
  font-size: 25px;
}
hr{
  border-top: none;
}
.fox{
  background-color: #fff;
}

</style>